<template>
  <div class="je-func-help">
    <je-panel>
      <template #tbar>
        <!-- 头部 -->
        <div class="header-flex">
          <!-- <div
            >参考数据源：
            <je-grid-select
              v-model:value="FUNCINFO_HELPSOURCE_TEXT"
              name="FUNCINFO_HELPSOURCE_TEXT"
              config-info="JE_CORE_DATASOURCE,FUNCINFO_HELPSOURCE_TEXT~FUNCINFO_HELPSOURCE,DATASOURCE_TEXT~DATASOURCE_CODE,S"
              style="width: 140px"
              :querys="querysArr"
              :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
              @select="selectFunc"
            />
            &nbsp;&nbsp;&nbsp;注：只支持公共数据源的JS和Action数据源，返回数据格式为{fields:"empty",data:{参数名1:"参数值",参数名2:"参数值"}}</div
          > -->
          <je-button type="text" @click="operateButton"><i class="fal fa-save"></i>保存</je-button>
        </div>
      </template>
      <template #default>
        <div v-if="FUNCINFO_HELP_SHOW" class="instruction-content">
          <je-editor-html
            ref="editorRef"
            v-model:value="FUNCINFO_HELP"
            width="100%"
            height="100%"
          />
        </div>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { Button, Panel, EditorHtml, Modal } from '@jecloud/ui';
  import { doUpdateHelp, ListItemCustomGetDetail } from '@/api/index';

  export default defineComponent({
    name: 'FunctionHelp',
    components: {
      JeButton: Button,
      // JeInput: Input,
      // JeGridSelect: InputSelect.Grid,
      JePanel: Panel,
      JeEditorHtml: EditorHtml,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: [],
    setup(props, { emit }) {
      const state = reactive({
        FUNCINFO_HELPSOURCE_TEXT: '',
        FUNCINFO_HELP: '',
        pkValue: props.recordData.JE_CORE_FUNCINFO_ID,
        FUNCINFO_HELPSOURCE: '',
        FUNCINFO_HELP_SHOW: ref(false),
      });
      // watch(
      //   () => state.FUNCINFO_HELP,
      //   (newVal) => {
      //     console.log('newValnewValnewVal',newVal);
      //     state.FUNCINFO_HELP = newVal;
      //   },
      // );
      const methods = {
        selectFunc({ rows }) {
          if (!rows.length) {
            return false;
          }
          state.FUNCINFO_HELPSOURCE = rows[0].DATASOURCE_CODE;
        },
        //  点击保存
        operateButton() {
          const FUNCINFO_HELP = methods.HTMLEncode(state.FUNCINFO_HELP);
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            JE_CORE_FUNCINFO_ID: state.pkValue,
            FUNCINFO_HELP: FUNCINFO_HELP,
            FUNCINFO_HELPSOURCE_TEXT: state.FUNCINFO_HELPSOURCE_TEXT,
            FUNCINFO_HELPSOURCE: state.FUNCINFO_HELPSOURCE,
          };
          doUpdateHelp(params)
            .then((res) => {
              Modal.message(res.message, 'success');
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
        // 获取初始数据
        getInitData() {
          state.FUNCINFO_HELP = '';
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            pkValue: state.pkValue,
          };

          ListItemCustomGetDetail(params)
            .then((res) => {
              state.FUNCINFO_HELP_SHOW = true;
              state.FUNCINFO_HELPSOURCE_TEXT = res.FUNCINFO_HELPSOURCE_TEXT || '';
              const FUNCINFO_HELP = res.FUNCINFO_HELP || '';
              state.FUNCINFO_HELP = methods.HTMLDecode(FUNCINFO_HELP);
            })
            .catch((error) => {
              Modal.alert(error.message, 'error');
            });
        },
        // 转义
        HTMLEncode(html) {
          var temp = document.createElement('div');
          temp.textContent != null ? (temp.textContent = html) : (temp.innerText = html);
          var output = temp.innerHTML;
          temp = null;
          return output;
        },
        // 反转义
        HTMLDecode(text) {
          var temp = document.createElement('div');
          temp.innerHTML = text;
          var output = temp.innerText || temp.textContent;
          temp = null;
          return output;
        },
      };
      // methods.getInitData()
      onMounted(() => {
        // 获取回显示的数据
        methods.getInitData();
      });
      return {
        ...methods,
        ...toRefs(state),
        querysArr: ref([{ code: 'DATASOURCE_TYPE', type: 'in', value: ['js', 'action'] }]),
      };
    },
  });
</script>
<style lang="less">
  .je-func-help {
    padding: 10px 20px;
    overflow: hidden;
    height: 100%;
    .header-flex {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .instruction-content {
      height: 100%;
    }
  }
</style>
